<template>
  <el-row :gutter="20">
    <el-col :span="14" :xs="24">
      <!-- 列表 -->
      <ContentWrap class="mt-10px">
        <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
          <el-table-column label="序号" type="index"  width="60px" />
          <el-table-column align="center" label="是否使用易制毒化学品" prop="isuseDrugs">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isuseDrugs" />
            </template>
          </el-table-column>
          <el-table-column label="易制毒化学品备案资料（登记表）">
            <template #default="{ row, $index }">
              <el-form-item :prop="`${$index}.drugsUrls`" class="mb-0px!" v-show="row.isuseDrugs === true">
                <UploadFile v-model="row.drugsUrls" disabled/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否使用易制爆化学品" prop="isuseExplo">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isuseExplo" />
            </template>
          </el-table-column>
          <el-table-column label="易制爆化学品备案资料（登记表）" min-width="500">
            <template #default="{ row, $index }">
              <el-form-item :prop="`${$index}.exploUrls`" class="mb-0px!" v-show="row.isuseExplo === true">
                <UploadFile v-model="row.exploUrls" disabled />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" label="管理人员姓名" prop="manager"/>
          <el-table-column align="center" label="管理人员联系电话" prop="phoneNumber"/>
        </el-table>
      </ContentWrap>
    </el-col>
    <!-- 右侧操作日志 -->
    <el-col :span="10" :xs="24">
      <OperateLogV2 :log-list="logList" />
    </el-col>
  </el-row>

</template>
<script lang="ts" setup>
import { ComplianceApi,ComplianceVO } from '@/api/crm/compliance'
import { DICT_TYPE } from '@/utils/dict'
import { BizTypeEnum } from '@/api/crm/permission'
import type { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'

defineOptions({ name: 'CompliancePdeDetail' })
const { compliance } = defineProps<{
  compliance: ComplianceVO
}>()

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据

/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => compliance.id,
  async (val) => {
    if (!val) {
      loading.value = false
      return;
    }
    try {
      loading.value = true
      list.value = await ComplianceApi.getCompliancePdeListByComplianceId(val)
      await getOperateLog()
    } finally {
      loading.value = false
    }
  },
  { immediate: true }
)

/** 获取操作日志 */
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async () => {
  if (!compliance.id) {
    return
  }
  const data = await getOperateLogPage({
    bizType: BizTypeEnum.CRM_COMPLIANCE_PDE,
    bizId: compliance.id
  })
  logList.value = data.list
}

</script>
